<template>
    <view>
		<!-- <navigator url="/pages/login/index">登录</navigator> -->
		<view class="user_info_wrap">
			<view v-if="userinfo.avatarUrl" class="user_img_wrap">
				<image class="user_bg" :src="userinfo.avatarUrl"></image>
				<view class="user_info">
					<image class="user_icon"  :src="userinfo.avatarUrl"></image>
					<view class="user_name">{{userinfo.nickName}}</view>
				</view>
			</view>
			<navigator url="/pages/login/index" v-else class="user_btn">
				<image class="nologin" mode="widthFix" src="@/static/img/nologin.png"></image>
				<view>点击登录</view>
			</navigator>
		</view>
		
		<view class="user_content">
			<view class="user_main">
				<view class="history_wrap">
					<navigator url="/pages/collect/index">
						<view class="his_num">{{collectNum}}</view>
						<view class="his_name">收藏</view>
					</navigator>
					<navigator url="/pages/footprint/index">
						<view class="his_num">{{footNum}}</view>
						<view class="his_name">我的足迹</view>
					</navigator>
					<navigator>
						<view class="his_num">￥{{money}}</view>
						<view class="his_name">零钱</view>
					</navigator>
				</view>
				<view class="order_wrap">
					<view class="order_title">
						我的订单
					</view>
					<view class="order_content">
						<navigator url="/pages/order/index?type=1">
							<view class="iconfont icon-ding_dan"></view>
							<view class="order_name">全部订单</view>
						</navigator>
						<navigator url="/pages/order/index?type=2">
							<view class="iconfont icon-fukuantongzhi"></view>
							<view class="order_name">代付款</view>
						</navigator>
						<navigator url="/pages/order/index?type=3">
							<view class="iconfont icon-receipt-address"></view>
							<view class="order_name">待收货</view>
						</navigator>
						
					</view>
				</view>
				<navigator class="address_wrap" url="/pages/get_userinfo/index">
					收货地址管理
				</navigator>
				<view class="app_info_wrap">
					<view class="app_info_item app_info_contact">
						<text>联系客服</text>
						<text class="tel" @click="telCall">183-1823-2772</text>
						<view class="iconfont icon-bodadianhua" @click="telCall"></view>
					</view>
					<navigator url="/pages/feedback/index" class="app_info_item">
					意见反馈</navigator>
					<!-- <view class="app_info_item">关于我们</view> -->
				</view>
				<view class="recommend_wrap">
					把应用推荐给其他人
					<button open-type="share"></button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>

	export default {
        data(){
			return{
				userinfo:{},
        		collectNum:0,
				footCart:[],
				footNum:0,
				money:0
			}
    	},

		onShow(){
			const userinfo = uni.getStorageSync("userinfo");
			const collect =uni.getStorageSync('collect')||[];

			this.userinfo = userinfo;
			this.collectNum = collect.length;

			this.money = uni.getStorageSync('money')||0;
			
			if(!userinfo){
				uni.showToast({title:'您还没有登录账号',icon:'none'})
					
				}

			this.footCart = uni.getStorageSync('footCart')||[];
			this.footNum = this.footCart.length;
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {// 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '该买就买！拾好货就上Easy商城',
				path: '/pages/home/index'
			}
		},
		onShareTimeline(res) {
			return{
				title: '',
				type: 0,
				query: 0,
				summary: "",
				imageUrl: ""
			}
		},
		methods:{
			telCall(){
				wx.makePhoneCall({
					phoneNumber: '18318232772'
				})
			},
			
		}
		
	}
</script>

<style lang="scss">
	page{
    background-color: #edece8;
	}
	.user_info_wrap{
		height: 45vh;
		overflow: hidden;
		background-color: var(--themeColor);
		position: relative;
		.user_img_wrap{
			position: relative;
			.user_bg{
				height: 48vh;
				filter: blur(10rpx);
			}
			.user_info{
				position: absolute;
				left: 50%;
				transform: translate(-50%);
				top: 20%;
				text-align: center;
				.user_icon{
					width: 150rpx;
					height: 150rpx;
					border-radius: 50%;
				}
				.user_name{
					color: #fff;
					margin-top: 40rpx;
					// font-size: 40rpx;
				}
			}
		}
		.user_btn{
			position: absolute;
			left: 50%;
			transform: translate(-50%);
			top: 25%;
			color: #fff;
			font-size: 38rpx;
			padding: 30rpx;
			.nologin{
				width: 130rpx;
				margin: 10rpx;
  				
			}
			
		}

	}
	.user_content{
		position: relative;
		.user_main{
			color: #666;
			padding-bottom: 100rpx;
			position: absolute;
			width: 90%;
			left: 50%;
			transform: translate(-50%);
			top: -40rpx;
			.history_wrap{
				background-color: #fff;
				display: flex;
				navigator{
					flex:1;
					text-align: center;
					padding: 10rpx 0;
				}
				.his_num{
					color: var(--themeColor);
				}
				.his_name{}
			}
			.order_wrap{
				background-color: #fff;
				margin-top: 30rpx;
				.order_title{
					padding: 20rpx;
					border-bottom: 1rpx solid #ccc;
				}
				.order_content{
					display: flex;
					navigator{
						padding: 15rpx 0;
						flex: 1;
						text-align: center;
						.iconfont{
							font-size: 40rpx;
							color:var(--themeColor);
						}
						.order_name{}
					}
				}

			}
			.address_wrap{
				margin-top: 30rpx;
				background-color: #fff;
				padding: 20rpx;
			}
			.app_info_wrap{
			
				margin-top: 30rpx;
				background-color: #fff;
				.app_info_item{
					padding: 20rpx;
					border-bottom: 1rpx solid #ccc;
					display: flex;
					.tel{
						padding-left: 250rpx;
					}
					.iconfont{
						font-size: 40rpx;
						color:var(--themeColor);
						}
				}
				.app_info_contact{
					display: flex;
					justify-content: space-between;
				}
			}
			.recommend_wrap{
				margin-top: 30rpx;
				background-color: #fff;
				padding: 20rpx; 
				position: relative;
				button{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					opacity: 0;
				}
			}
		}
	}
</style>